<template>
<el-container>
  <el-aside style="width:280px;height:740px;border: 1px solid #ddd;overflow: auto;">
  <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="filter-input-text"></el-input>
      <el-tree
        :props = "props1"
        :highlight-current='true'
        :load = "loadNode"
        @node-click = "clickNode"
        @current-change = "changeCurrent"
        :filter-node-method = "filterNode"
        :expand-on-click-node = false
        :accordion = true
        lazy
        node-key ="id"
        :key="treeKey"
        ref ="tree">
          <span slot-scope="{ node, data }">
            <i v-if="parseInt(data.type.isCreateAddress) === 1" class="iconfont icon-address"></i>
            <i v-else class="iconfont icon-region"></i>
            <span style="padding-left: 0px;">{{node.label}}</span>
          </span>
      </el-tree>
  </el-aside>
  <el-container style="margin-top:-20px;">
    <el-main>
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" style="height:739px;" >
        <el-tab-pane class="tabs"  name="first" ref="region">
          <span slot="label"><i class="el-icon-date"></i> 区域管理</span>
          <div v-if="isRegionShow" ><region-manager ref="regionManager"></region-manager></div>
          <div v-else class="no-data">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane class="tabs"  name="standardTab" ref="standard">
          <span slot="label"><i class="el-icon-date"></i> 标准地址管理</span>
          <div v-if="isAddressShow" ><address-manager ref="addressManager"></address-manager></div>
          <div v-else class="no-data">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane class="tabs"  name="peopleTab" ref="people">
          <span slot="label"><i class="el-icon-date"></i> 登记人口管理</span>
          <div v-if="isActualPopulationShow" ><actual-population-manager ref="actualPopulationManager"></actual-population-manager></div>
          <div v-else class="no-data">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane class="tabs"  name="companyTab" ref="company">
          <span slot="label"><i class="el-icon-date"></i> 登记单位管理</span>
          <div v-if="isActualUnitShow" ><actual-unit-manager ref="actualUnitManager"></actual-unit-manager></div>
          <div v-else class="no-data">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane class="tabs"  name="housingTab" ref="housing">
          <span slot="label"><i class="el-icon-date"></i> 实有房屋管理</span>
          <div v-if="isActualHouseShow" ><actual-house-manager ref="actualHouseManager"></actual-house-manager></div>
          <div v-else class="no-data">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane class="tabs"  name="actpeolpleTab" ref="actpeolple">
          <span slot="label"><i class="el-icon-date"></i> 实有人口管理</span>
          <div v-if="isActualPeopleShow" ><substantial-people-manager ref="substantialPeopleManager"></substantial-people-manager></div>
          <div v-else class="no-data">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane class="tabs"  name="departmentTab" ref="department">
          <span slot="label"><i class="el-icon-date"></i> 实有单位管理</span>
          <div v-if="isActualDepartmentShow" ><department-unit-manager ref="departmentUnitManager"></department-unit-manager></div>
          <div v-else class="no-data">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane class="tabs" name="deviceTab" ref="device">
          <span slot="label"><i class="el-icon-date"></i> 设备管理</span>
          <div v-if="isAddressShow && !deviceFlag"><device ref="deivceManager"></device></div>
          <div v-if="isAddressShow && deviceFlag"><device1 ref="deivceManager1"></device1></div>
          <!-- <div v-else class="no-data">暂无数据</div> -->
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import departmentUnitManager from "./department-unit-manager";
import substantialPeopleManager from "./substantial-people-manager";
import RegionManager from "./region-manager";
import AddressManager from "./address-manager";
import ActualHouseManager from "./actual-house-manager";
import ActualPopulationManager from "./actual-population-manager";
import ActualUnitManager from "./actual-unit-manager";
import device from "./device";
import device1 from "./device1";
import { getDictList } from "@/utils";
import { validatenull } from "@/utils/validate";
import { setTimeout } from "timers";
export default {
  components: {
    RegionManager,
    AddressManager,
    ActualHouseManager,
    ActualPopulationManager,
    ActualUnitManager,
    substantialPeopleManager,
    departmentUnitManager,
    device,
    device1
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      //搜索过滤的值
      deviceFlag: false,
      communityId: "",
      filterText: "",
      tabName: "",
      addressName: [],
      isAddressShow: true,
      isActualHouseShow: true,
      isActualPopulationShow: true,
      isActualUnitShow: true,
      isActualPeopleShow: true,
      isActualDepartmentShow: true,
      resolve: "",
      treeKey: "", // 控制tree渲染的key
      props1: {
        label: "name",
        children: "child",
        isLeaf: function(data, node) {
          if (data.isLeaf === 1) {
            return true;
          }
          return false;
        },
        disabled: "disabled"
      },
      activeName: "first"
    };
  },
  computed: {
    regionId() {
      return this.$store.state.address.regionId;
    },
    isRegionShow() {
      return this.$store.state.address.isRegionShow;
    }
  },
  created() {
    // this.addressId = false
    this.$store.commit("address/updateIsRegionShow", false);
    this.isAddressShow = false;
    this.isActualHouseShow = false;
    this.isActualPopulationShow = false;
    this.isActualUnitShow = false;
    this.isActualPeopleShow = false;
    this.isActualDepartmentShow = false;
  },
  methods: {
    // table选项切换触发的事件
    handleClick({ name }) {
      this.tabName = name;
      if (name === "standardTab" && this.isAddressShow) {
        this.$nextTick(() => {
          this.$refs.addressManager.adjust();
          this.$refs.addressManager.getDataList();
        });
      } else if (name === "housingTab" && this.isActualHouseShow) {
        this.$nextTick(() => {
          this.$refs.actualHouseManager.adjust(this.communityId);
          this.$refs.actualHouseManager.getDataList();
        });
      } else if (name === "peopleTab" && this.isActualPopulationShow) {
        this.$nextTick(() => {
          this.$refs.actualPopulationManager.adjust();
          this.$refs.actualPopulationManager.getDataList();
        });
      } else if (name === "companyTab" && this.isActualUnitShow) {
        this.$nextTick(() => {
          this.$refs.actualUnitManager.adjust();
          this.$refs.actualUnitManager.getDataList();
        });
      } else if (name === "deviceTab" && this.isAddressShow) {
        this.$nextTick(() => {
          this.$refs.deivceManager.adjust(this.communityId);
          this.$refs.deivceManager.getDataList();
        });
      } else if (name === "actpeolpleTab" && this.isActualPeopleShow) {
        this.$nextTick(() => {
          this.$refs.substantialPeopleManager.adjust();
          this.$refs.substantialPeopleManager.getDataList();
        });
      } else if (name === "departmentTab" && this.isActualDepartmentShow) {
        this.$nextTick(() => {
          this.$refs.departmentUnitManager.adjust();
          this.$refs.departmentUnitManager.getDataList();
        });
      }
    },
    loadNode(node, resolve) {
      if (node.data) {
        if (node.data.type.id === 42) {
          this.communityId = node.data.id;
        }
      }
      this.resolve = resolve;
      // 如果没有小区id说明是管理员
      if (validatenull(sessionStorage.getItem("thiscommunityId"))) {
        if (node.level === 0) {
          return resolve([
            { id: "0", name: "行政区域选择", isLeaf: false, type: { id: 0 } }
          ]);
        } else {
          this.$http({
            url: `/dg-standard-info/dgstandardregion/regionbyparentid/${
              node.data.id
            }`,
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              return resolve(data.data);
            }
          });
        }
      } else {
        if (node.level === 0) {
          this.$http({
            url: `/dg-standard-info/dgstandardregion/info/${sessionStorage.getItem(
              "thiscommunityId"
            )}`,
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              return resolve([
                {
                  id: data.data.id,
                  name: data.data.name,
                  isLeaf: false,
                  type: {
                    isCreateAddress: 1,
                    id: 1
                  }
                }
              ]);
            }
          });
        } else {
          this.$http({
            url: `/dg-standard-info/dgstandardregion/regionbyparentid/${
              node.data.id
            }`,
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              return resolve(data.data);
            }
          });
        }
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    refreshNode(node) {
      this.$http({
        url: `/dg-standard-info/dgstandardregion/regionbyparentid/${
          node.data.id
        }`,
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          node.loaded = true;
          node.loading = false;
          node.childNodes = [];
          node.doCreateChildren(data.data);
          node.updateLeafState();
        }
      });
    },
    // Todothis.$refs.regionManager != undefined暂时解决第一次点击报错问题
    changeCurrent(data, node) {
      if (this.addressId != node.data.id) {
        this.$nextTick(() => {
          setTimeout(() => {
            if (this.$refs.regionManager !== undefined) {
              this.$refs.regionManager.isDisable = true;
            }
          }, 1000);
        });
      }
    },
    clickNode(data, node, self) {
      this.$store.commit("address/updateRegionId", data.id);
      this.global.setTreeNode(node);
      this.global.setRefreshNode(this.refreshNode);
      if (data.type.id == 42) {
        // 小区的话记录小区id
        this.communityId = data.id;
        // 显示全部设备
        this.deviceFlag = true;
        this.$nextTick(() => {
          this.$refs.deivceManager1.adjust(this.communityId);
          this.$refs.deivceManager1.getDataList();
        });
      }
      // 可以创建
      if (parseInt(data.type.isCreateAddress) === 1) {
        if (parseInt(data.type.id) > 0) {
          this.$store.commit("address/updateIsRegionShow", true);
          this.$nextTick(() => {
            this.$refs.regionManager.init();
          });
        } else {
          this.$store.commit("address/updateIsRegionShow", false);
        }
        // 打开实有单位
        this.isActualUnitShow = true;
        // 实有房屋
        this.isActualHouseShow = true;
        // 标准地址
        this.isAddressShow = true;
        // 实有人口
        this.isActualPopulationShow = true;
        this.isActualPeopleShow = true;
        this.isActualDepartmentShow = true;
        this.$nextTick(() => {
          // setTimeout(() => {
          // this.$store.commit('address/updateIsRegionShow', true)
          // 根据小区id获取地址后查询设备列表 Todothis.$refs.regionManager != undefined暂时解决第一次点击报错问题
          // if(this.$refs.regionManager != undefined){
          // this.$refs.regionManager.init();
          // }
          // this.$refs.peopleManager.initParam();
          // 根据点击的区域id查询区域详情 Todothis.$refs.regionManager != undefined暂时解决第一次点击报错问题
          if (validatenull(sessionStorage.getItem("thiscommunityId"))) {
            // 小区id为空说明是管理员
            if (
              parseInt(data.type.id) === 42 &&
              this.$refs.regionManager !== undefined
            ) {
              this.$refs.regionManager.initHousing();
              this.deviceFlag = true;
              this.$nextTick(() => {
                this.$refs.deivceManager1.adjust(this.communityId);
                this.$refs.deivceManager1.getDataList();
              });
            } else {
              this.deviceFlag = false;
            }
          } else {
            if (
              parseInt(data.type.id) === 1 &&
              this.$refs.regionManager !== undefined
            ) {
              this.$refs.regionManager.initHousing();
              this.deviceFlag = true;
              this.$nextTick(() => {
                this.$refs.deivceManager1.adjust(this.communityId);
                this.$refs.deivceManager1.getDataList();
              });
            } else {
              this.deviceFlag = false;
            }
          }

          if (
            parseInt(data.type.id) === 61 &&
            this.$refs.regionManager !== undefined
          ) {
            this.$refs.regionManager.initBuilding();
          }
          // 点击树节点后就加载数据
          if (this.tabName === "standardTab" && this.isAddressShow) {
            //此方法是点击点击树节点后对当前的tab刷新
            this.$nextTick(() => {
              this.$refs.addressManager.adjust();
              this.$refs.addressManager.getDataList();
            });
          } else if (this.tabName === "housingTab" && this.isActualHouseShow) {
            this.$nextTick(() => {
              this.$refs.actualHouseManager.adjust(this.communityId);
              this.$refs.actualHouseManager.getDataList();
            });
          } else if (
            this.tabName === "peopleTab" &&
            this.isActualPopulationShow
          ) {
            this.$nextTick(() => {
              this.$refs.actualPopulationManager.adjust();
              this.$refs.actualPopulationManager.getDataList();
            });
          } else if (this.tabName === "companyTab" && this.isActualUnitShow) {
            this.$nextTick(() => {
              this.$refs.actualUnitManager.adjust();
              this.$refs.actualUnitManager.getDataList();
            });
          } else if (this.tabName === "deviceTab" && this.isAddressShow) {
            this.$nextTick(() => {
              this.$refs.deivceManager.adjust(this.communityId);
              this.$refs.deivceManager.getDataList();
            });
          } else if (
            this.tabName === "actpeolpleTab" &&
            this.isActualPeopleShow
          ) {
            this.$nextTick(() => {
              this.$refs.substantialPeopleManager.adjust();
              this.$refs.substantialPeopleManager.getDataList();
            });
          } else if (
            this.tabName === "departmentTab" &&
            this.isActualDepartmentShow
          ) {
            this.$nextTick(() => {
              this.$refs.departmentUnitManager.adjust();
              this.$refs.departmentUnitManager.getDataList();
            });
          }

          // this.$refs.actualUnitManager.getDataList();
          // this.$refs.actualHouseManager.getDataList();
          // this.$refs.addressManager.getDataList();
          // this.$refs.actualPopulationManager.getDataList();
          // this.$refs.deivceManager.getDataList();
          // this.$refs.substantialPeopleManager.getDataList();
          // this.$refs.departmentUnitManager.getDataList();

          // }, 1000);
        });
      } else {
        this.$store.commit("address/updateIsRegionShow", false);
        this.isAddressShow = false;
        this.isActualHouseShow = false;
        this.isActualPopulationShow = false;
        this.isActualUnitShow = false;
        this.isActualPeopleShow = false;
        this.isActualDepartmentShow = false;
      }
    }
  }
};
</script>

<style lang="scss" >
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: blue;
  background-color: white;
}
.tabs {
  height: 600px;
}
.tabs .no-data {
  font-size: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #909399;
}

.filter-input-text .el-input__inner {
  border-radius: 0;
  border: 0px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
</style>


